import React from 'react';
import{Axis,Geom,Tooltip,Chart, Coord, Label, Legend, View, Guide, Shape} from 'bizcharts'

import './style.css'

class ChartDemo extends React.PureComponent {

  render() {
        const data = [
    { year: '1月', sales: 38 },
    { year: '2月', sales: 52 },
    { year: '3月', sales: 61 },
    { year: '4月', sales: 14 },
    { year: '5月', sales: 48 },
    { year: '6月', sales: 38 },
    { year: '7月', sales: 28 },
    { year: '8月', sales: 18 },
    { year: '9月', sales: 46},
    { year: '10月', sales: 19 },
    { year: '11月', sales: 51 },
    { year: '12月', sales: 21 },
    ];
    const cols = {
    'sales': {tickInterval: 100},
    };

    return (

      <div>
        {/*总销售额*/}
        <div className="home-top-box">
          <div className="sale-box">
              <div className="sale-tit">总销售额</div>
              <div className="sale-sum-amount">￥124,421</div>
              <div className="sale-float">
                <div className="sale-float-box">
                  <div className="sale-week">周同比<span>12%<i>↑</i></span></div>
                  <div className="sale-day">日环比<span>11%<i>↓</i></span></div>
                </div>
              </div>
            <div className="sale-avg-amount">日均销售额<span>￥12,565</span></div>
          </div>
          <div className="pv-box">
              <div className="pv-tit">访问量</div>
              <div className="pv-sum-amount">8,898</div>
              <div className="chart-box">
                {/*
                  <Chart width={200} height={100} data={data} scale={cols} forceFit>
                    <Tooltip crosshairs={{type : "y"}}/>
                    <Geom type="interval" position="year*sales" />
                  </Chart>
                  */}
              </div>
              <div className="pv-avg-amount">日均销售额<span>￥12,565</span></div>
          </div>
          <div className="pay-num-box">
            <div className="pay-tit">支付笔数</div>
            <div className="pay-sum-amount">6,424</div>
              <div className="chart-box">
                {/*
                  <Chart width={200} height={100} data={data} scale={cols} forceFit>
                    <Tooltip crosshairs={{type : "y"}}/>
                    <Geom type="interval" position="year*sales" />
                  </Chart>
                  */}

              </div>
              <div className="pay-avg-amount">转化率<span>60%</span></div>
          </div>
          <div className="activity-box">
            <div className="activity-tit">运营活动结果</div>
            <div className="activity-sum-amount">88%</div>
              <div className="chart-box">
                {/*
                  <Chart width={200} height={100} data={data} scale={cols} forceFit>
                    <Tooltip crosshairs={{type : "y"}}/>
                    <Geom type="interval" position="year*sales" />
                  </Chart>
                  */}

              </div>
              <div className="activity-avg-amount">
                <div className="activity-week">周同比<span>12%<i>↑</i></span></div>
                <div className="activity-day">日环比<span>11%<i>↓</i></span></div>
              </div>
          </div>
        </div>
          {/*
            <div className="chart-box">
              <Chart width={400} height={400} data={data} scale={cols} forceFit>
                <Axis name="year" />
                <Axis name="sales" />
                <Tooltip crosshairs={{type : "y"}}/>
                <Geom type="interval" position="year*sales" />
              </Chart>
            </div>
            */}

      </div>
    )
  }

}

export default ChartDemo
